<script setup>
import { ref, watch, nextTick } from 'vue';
import { isPhone } from '@/plugins/util.js'


const props = defineProps({
    show: {
        type: Boolean,
        default: false,
        required: true
    },
    maxWidth: {
        type: String,
        default: '800px'
    },
    maxHeight: {
        type: String,
        default: 'auto'
    },
    styleSet: {
        type: Object,
        default: function () {
            return {};
        }
    },
    footerShow: {
        type: Boolean,
        default: true
    }
});
const emit = defineEmits(['close']);


// const closePop = () => {
//     emit('close')
// }


// let orgoverflow = document.querySelector('body').style.overflow;
// 提供一个 getter 函数
// watch(
//     () => props.show,
//     () => {
//         if (props.show) {
//             document.querySelector('body').style.overflow = 'hidden'
//         }
//     }
// )

// const onBeforeEnter = () => {
//     if (props.show && !isPhone) {
//         let hasScrollbar = document.body.scrollHeight > window.innerHeight;
//         if (hasScrollbar) {
//             console.log("页面出现了滚动条");
//         } else {
//             console.log("页面没有出现滚动条");
//             // 解决因为动画导致的页面出现右侧滚动条，导致页面抖动
//             document.querySelector('body').style.overflow = 'hidden'
//         }
//     }
// }

// const onAfterLeave = () => {
//     if (!props.show) {
//         document.querySelector('body').style.overflow = orgoverflow
//     }
// }

</script>

<template>
    <div class="z-50" name="hpop">
        <div class="fixed inset-0 bg-black opacity-50 transition" v-if="show"></div>
        <!-- @before-enter="onBeforeEnter" @after-leave="onAfterLeave" -->
        <transition enter-active-class="animate__animated animate__fadeInUp animate__faster"
            leave-active-class="animate__animated animate__fadeOutDown animate__faster">
            <!-- <transition enter-active-class="animated fadeInUp faster" leave-active-class="animated fadeOutDown faster"> -->

            <!--        <transition enter-active-class="animated zoomIn faster" leave-active-class="animated zoomOut faster">-->
            <!--        <transition enter-active-class="animated slideInUp faster" leave-active-class="animated slideOutUp faster">-->
            <div class="fixed inset-0" ref="popparent" v-if="show">
                <div class=" absolute top-1/3 inset-x-2 mx-auto bg-white max-w-screen-md rounded border border-gray-200 "
                    :style="styleSet" ref="popcontent">
                    <div class="grid gap-y-5">
                        <header class="flex justify-between items-center h-12 border-b border-gray-200 bg-gray-200 pl-4">
                            <slot name="header">弹窗标题</slot>
                            <div @click="emit('close')" name="dialog-close"
                                class="px-4 h-full flex justify-center items-center cursor-pointer rounded transition hover:bg-gray-400">
                                <i class="fas fa-times" aria-hidden="true"></i>
                            </div>
                        </header>
                        <section class="px-4 overflow-y-auto" style="max-height: 50vh;">
                            <slot name="main">弹窗内容</slot>
                        </section>
                        <footer class="border-t-2 border-gray-200 py-1" v-show="footerShow">
                            <slot name="footer"></slot>
                        </footer>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<style scoped>
.pop-transion-enter-active,
.pop-transion-leave-active {
    transition: opacity .5s;
}

.pop-transion-enter,
.pop-transion-leave-to

/* .fade-leave-active below version 2.1.8 */
    {
    opacity: 0;
}
</style>
